import '../css/goods.css';
import '../fonts/iconfont.css';
import ajax from '../untils/ajax';

toTop();
function toTop() {
    const topBtn = document.getElementById("barTotop");
    topBtn.onclick = function () {
        console.log('top');
        let timer = null;
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn() {
            let oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if (oTop > 0) {
                scrollTo(0, oTop - 100);
                timer = requestAnimationFrame(fn);
            } else {
                cancelAnimationFrame(timer);
            }
        });
    }
}

showMRL();
function showMRL() {
    const ptpBtn = document.getElementById('headWsale');
    const loginBtn = document.getElementById("topLogin");
    const regBtn = document.getElementById("topReg");
    const goR = document.getElementById('goRegBox');
    const goL = document.getElementById('goLoginBox');
    const NullBtn = document.getElementById('ptpNull');
    const loginBox = document.getElementById('loginBox');
    const regBox = document.getElementById('regBox');
    const ptpBox = document.getElementById('ptp');

    const M = document.getElementById('blackM');

    NullBtn.onclick = function () {
        ptpBox.style.display = 'none';
        M.style.display = 'none';
    }

    ptpBtn.onclick = function () {
        console.log('ptp');
        ptpBox.style.display = 'block';
        M.style.display = 'block';
    }
    loginBtn.onclick = function () {
        console.log('loginBox');
        loginBox.style.display = 'block';
        M.style.display = 'block'
    }
    regBtn.onclick = function () {
        console.log('regBox');
        regBox.style.display = 'block';
        M.style.display = 'block'
    }
    M.onclick = function () {
        M.style.display = 'none';
        ptpBox.style.display = 'none';
        loginBox.style.display = 'none';
        regBox.style.display = 'none';
    }
    goR.onclick = function () {
        loginBox.style.display = 'none';
        regBox.style.display = 'block';
    }
    goL.onclick = function () {
        regBox.style.display = 'none';
        loginBox.style.display = 'block';
    }
}

imgShow();
function imgShow() {
    let form = document.forms[0];
    let upload = document.getElementById('uploadPTP');
    let frObj = new FileReader();
    upload.onclick = function () {
        form.file1.click();
    }
    form.file1.onchange = function () {
        if (this.files.length > 0) {
            if (this.files[0].size / 1024 / 1024 < 5) {
                // frObj.readAsDataURL(this.files[0]); //异步方法
                document.getElementById('imgPTP').src = URL.createObjectURL(this.files[0])
            } else {
                console.log('图片过大');
            }
        }
    }
}

test();
function test() {
    const barBtn = document.getElementById('barHelp');
    barBtn.onclick = function () {
        location.assign('goodsinfo.html')
    }
}

goodsAll();
function goodsAll() {
    ajax('get', '/api/users/getGoods').then(result => {
        console.log(result.data);
        const arr = result.data;
        const show = document.getElementById('goodsShow');
        for (let i = 0; i < arr.length; i++) {
            let path = arr[i].img.slice(7);
            let box = document.createElement('div');
            box.innerHTML = `
            <img src="http:\\\\127.0.0.1:3000\\${path}"/>
                    <h1>${arr[i].name} <span>${arr[i].fineness}</span></h1>
                    <h2>￥${arr[i].price}</h2>
            `
            box.dataset.id = arr[i]._id;
            box.onclick = function () {
                window.open(`goodsinfo.html?id=${arr[i]._id}`)
            }
            box.className = 'goodsbox';
            show.append(box);
        }


    })
}
getTab();
function getTab() {
    const tab = document.querySelectorAll('.classtab');
    for (let i = 0; i < 7; i++) {
     
    }
    
    tab[0].onclick = function () {
        ajax('get', '/api/users/getGoods').then(result => {
            const arr = result.data;
            const show = document.getElementById('goodsShow');
            show.innerHTML = '';
            for (let j = 0; j < arr.length; j++) {

                console.log(arr[j]);
                let path = arr[j].img.slice(7);
                let box = document.createElement('div');
                box.innerHTML = `
            <img src="http:\\\\127.0.0.1:3000\\${path}"/>
                    <h1>${arr[j].name} <span>${arr[j].fineness}</span></h1>
                    <h2>￥${arr[j].price}</h2>
            `
                box.className = 'goodsbox';
                box.dataset.id = arr[j]._id;
                box.onclick = function () {
                    window.open(`goodsinfo.html?id=${arr[j]._id}`)
                }
                show.append(box);


            }
        })
    }
    tab[1].onclick = function () {
        ajax('get', '/api/users/getGoods').then(result => {
            const arr = result.data;
            const show = document.getElementById('goodsShow');
            show.innerHTML = '';
            for (let j = 0; j < arr.length; j++) {
                if (arr[j].classify == '家居') {
                    console.log(arr[j]);
                    let path = arr[j].img.slice(7);
                    let box = document.createElement('div');
                    box.innerHTML = `
            <img src="http:\\\\127.0.0.1:3000\\${path}"/>
                    <h1>${arr[j].name} <span>${arr[j].fineness}</span></h1>
                    <h2>￥${arr[j].price}</h2>
            `
                    box.className = 'goodsbox';
                    box.dataset.id = arr[j]._id;
                    box.onclick = function () {
                        window.open(`goodsinfo.html?id=${arr[j]._id}`)
                    }
                    show.append(box);
                }

            }
        })
    }
    tab[2].onclick = function () {
        ajax('get', '/api/users/getGoods').then(result => {
            const arr = result.data;
            const show = document.getElementById('goodsShow');
            show.innerHTML = '';
            for (let j = 0; j < arr.length; j++) {
                if (arr[j].classify == '美妆') {
                    console.log(arr[j]);
                    let path = arr[j].img.slice(7);
                    let box = document.createElement('div');
                    box.innerHTML = `
            <img src="http:\\\\127.0.0.1:3000\\${path}"/>
                    <h1>${arr[j].name} <span>${arr[j].fineness}</span></h1>
                    <h2>￥${arr[j].price}</h2>
            `
                    box.className = 'goodsbox';
                    box.dataset.id = arr[j]._id;
                    box.onclick = function () {
                        window.open(`goodsinfo.html?id=${arr[j]._id}`)
                    }
                    show.append(box);
                }

            }
        })
    }
    tab[3].onclick = function () {
        ajax('get', '/api/users/getGoods').then(result => {
            const arr = result.data;
            const show = document.getElementById('goodsShow');
            show.innerHTML = '';
            for (let j = 0; j < arr.length; j++) {
                if (arr[j].classify == '手机') {
                    console.log(arr[j]);
                    let path = arr[j].img.slice(7);
                    let box = document.createElement('div');
                    box.innerHTML = `
            <img src="http:\\\\127.0.0.1:3000\\${path}"/>
                    <h1>${arr[j].name} <span>${arr[j].fineness}</span></h1>
                    <h2>￥${arr[j].price}</h2>
            `
                    box.className = 'goodsbox';
                    box.dataset.id = arr[j]._id;
                    box.onclick = function () {
                        window.open(`goodsinfo.html?id=${arr[j]._id}`)
                    }
                    show.append(box);
                }

            }
        })
    }
    tab[4].onclick = function () {
        ajax('get', '/api/users/getGoods').then(result => {
            const arr = result.data;
            const show = document.getElementById('goodsShow');
            show.innerHTML = '';
            for (let j = 0; j < arr.length; j++) {
                if (arr[j].classify == '汽摩') {
                    console.log(arr[j]);
                    let path = arr[j].img.slice(7);
                    let box = document.createElement('div');
                    box.innerHTML = `
            <img src="http:\\\\127.0.0.1:3000\\${path}"/>
                    <h1>${arr[j].name} <span>${arr[j].fineness}</span></h1>
                    <h2>￥${arr[j].price}</h2>
            `
                    box.className = 'goodsbox';
                    box.dataset.id = arr[j]._id;
                    box.onclick = function () {
                        window.open(`goodsinfo.html?id=${arr[j]._id}`)
                    }
                    show.append(box);
                }

            }
        })
    }
    tab[5].onclick = function () {
        ajax('get', '/api/users/getGoods').then(result => {
            const arr = result.data;
            const show = document.getElementById('goodsShow');
            show.innerHTML = '';
            for (let j = 0; j < arr.length; j++) {
                if (arr[j].classify == '图书') {
                    console.log(arr[j]);
                    let path = arr[j].img.slice(7);
                    let box = document.createElement('div');
                    box.innerHTML = `
            <img src="http:\\\\127.0.0.1:3000\\${path}"/>
                    <h1>${arr[j].name} <span>${arr[j].fineness}</span></h1>
                    <h2>￥${arr[j].price}</h2>
            `
                    box.className = 'goodsbox';
                    box.dataset.id = arr[j]._id;
                    box.onclick = function () {
                        window.open(`goodsinfo.html?id=${arr[j]._id}`)
                    }
                    show.append(box);
                }

            }
        })
    }
    tab[6].onclick = function () {
        ajax('get', '/api/users/getGoods').then(result => {
            const arr = result.data;
            const show = document.getElementById('goodsShow');
            show.innerHTML = '';
            for (let j = 0; j < arr.length; j++) {
                if (arr[j].classify == '运动') {
                    console.log(arr[j]);
                    let path = arr[j].img.slice(7);
                    let box = document.createElement('div');
                    box.innerHTML = `
            <img src="http:\\\\127.0.0.1:3000\\${path}"/>
                    <h1>${arr[j].name} <span>${arr[j].fineness}</span></h1>
                    <h2>￥${arr[j].price}</h2>
            `
                    box.className = 'goodsbox';
                    box.dataset.id = arr[j]._id;
                    box.onclick = function () {
                        window.open(`goodsinfo.html?id=${arr[j]._id}`)
                    }
                    show.append(box);
                }

            }
        })
    }

}

login_reg();
function login_reg() {
  const regBox = document.querySelector('#regBox');
  const loginBox = document.querySelector('#loginBox');
  const form = document.querySelector('#regBox form');
  const form2 = document.querySelector('#loginBox form');

  form.onsubmit = e => {
    e.preventDefault();
    const username = form.username.value;
    const password = form.password.value;
    ajax('post', '/api/users/reg?', { username, password }).then(result => {
      if (result.flag) {
        alert('注册成功，请登录');
        regBox.style.display = "none"
        loginBox.style.display = "block"
      } else {
        alert(result.msg);
        form.username.select();
        form.username.focus();
      }
    }).catch(err => {
      alert('服务器出错', err);
    })

  }

  form2.onsubmit = e => {
    e.preventDefault();
    const username = form2.username.value;
    const password = form2.password.value;
    if (username && password) {
      ajax('post', '/api/users/login', {
        username: form2.username.value,
        password: form2.password.value
      }).then(result => {
        if (result.flag) {
          alert('登录成功')
          localStorage.setItem('token', result.token);
          location.assign('index.html')
        } else {
          alert(result.msg)
        }
      })
    } else {
      alert('请填写表单每一项')
    }
  }
}

toggle();
function toggle() {
  const toggle = document.querySelector('.toggle');
  const bow = document.querySelector('#bow');
  const bowReg = document.querySelector('#bowReg');
  const clear = document.querySelector('.clear');
  let login = localStorage.getItem("token")
  bow.style.display = "none"

  if (login) {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          toggle.style.display = "none"
          bow.style.display = "inline-block"
          bowReg.innerHTML = '用户:' + xhr.response.username;
        }
      }
    };

    xhr.open('get', `/api/users/index`, true);
    // 设置请求头
    xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('token'));
    xhr.responseType = "json";
    xhr.send();
  }

  clear.onclick = () => {
    if (confirm("您是否退出账号")) {
      localStorage.clear()
      alert("已退出")
      location.replace('./')
    }
  }
}